<template>
	<view>
		<view class="">
			<QS-gallery-swiper @click="swiperClick" ref="gallerySwipe" :images="swiperarr" height="320"
				imageHeight="300" imageWidth="800" :changeReset="false" :autoplay="true" :mask="false"
				:indicatorDots="true" :imageBackground="false" :space="50" :scale="50" :defCurrent="0"
				:showControl="false" :defReady="false" unit="px"></QS-gallery-swiper>
		</view>
		
		<view class="white-box-header">
			<view class="white-box-title"><text class="mainColor">最新</text>音乐</view>
			<view class="fontsize-small fontcolor-secondary mtop1">更多</view>
		</view>
		<view class="white-box-list-udb">
			<!-- 首页最新音乐-->
			<unicloud-db id="test" ref="lastMusic" class="white-box-list"
				v-slot:default="{data, loading, error, options}" orderby="publish_date desc"
				collection="my-music" @load="handleLoad" where="is_sticky==true"
				field="_id as id,category_id,title,music_src,author,poster,publish_date,last_modify_date" :page-size="14">
				<view v-if="error">{{error.message}}</view>
				<view class="white-lastmusic" v-else-if="loading">
					查询中...
				</view>
				<view class="white-lastmusic" v-for="(item,index) in data" :key="index">
					<view class="white-lastmusic-poster" @click="playOne(item)">
						<image :src="item.poster||'../../static/imgs/poster-basic4.png'" mode=""></image>
						<view class="palyIcon ri-play-fill">
						</view>
					</view>
					<view class="font-hidden" @click="goMusicDetail(item)">{{item.title}}</view>
					<view class="fontsize-small fontcolor-secondary">{{item.author||'佚名'}}</view>
					<view class="fontsize-small fontcolor-secondary">发行时间：
						<uni-dateformat format="yyyy-MM-dd" :date="item.last_modify_date" />
					</view>
				</view>
			</unicloud-db>
		</view>
		<view class="white-box-header">
			<view class="white-box-title"><text class="mainColor">最新</text>歌单</view>
			<view class="fontsize-small fontcolor-secondary mtop1">更多</view>
		</view>
		<view ref="styleList" class="white-box-list-udb">
			<!-- 首页最新歌单-->
			<unicloud-db ref="indexSonglist" style="width: 100%;"
				v-slot:default="{data,pagination,loading, error, options,hasMore}" page-data="replace"
				:page-current="1" :page-size="10" getcount orderby="last_modify_date desc"
				collection="my-music-songlist,my-music-styles,my-music" 
				field="_id as id,create_date,description,listName,listPoster,music_array{_id as id,title,music_src,poster},style_ids{_id as id,name}">
				<view class="h-3 mt-1 mb-1 text-xs text-base">
					<view v-if="error">{{error.message}}</view>
					<view v-else-if="loading">
						查询中...
					</view>
					<view v-else-if="data.length<1" class="text-warning">暂时没有数据</view>
				</view>
			
				<!-- 单个音乐的循环体 -->
				<view class="white-box-list">
					<!-- 在循环体前引入8插件，样式为两端对齐后，最后一行补齐 -->
					<!-- <my-Spacebetween id="mybox" :outerLength="outerLength" :inLength="inLength" :listLen="listLen"> -->
						<view class="white-lastmusic" v-for="(item,index) in data" :key="index">
							<view class="white-lastmusic-poster" @click="$emit('playList',item.music_array)">
								<image :src="item.listPoster||'../../static/imgs/poster-basic4.png'" mode=""></image>
								<view class="palyIcon ri-play-fill">
								</view>
							</view>
							<view class="font-hidden" @click="$emit('goListDetail',item)">{{item.listName}}</view>
							<!-- <view class="fontsize-small fontcolor-secondary">{{item.description}}</view> -->
							<view class="fontsize-small fontcolor-secondary">发行时间：
								<uni-dateformat format="yyyy-MM-dd" :date="item.create_date" />
							</view>
						</view>
					<!-- </my-Spacebetween> -->
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-index",
		data() {
			return {
				swiperarr: [
					{
						path: '../../static/banner/banner01.jpg',
						id: ''
					},
					{
						path: '../../static/banner/banner02.jpg',
						id: ''
					},
					{
						path: '../../static/banner/banner03.jpg',
						id: ''
					},
					{
						path: '../../static/banner/banner04.png',
						id: ''
					},
					{
						path: '../../static/banner/banner05.jpg',
						id: ''
					},
					{
						path: '../../static/banner/banner06.jpg',
						id: ''
					},
					{
						path: '../../static/banner/banner07.jpg',
						id: ''
					},
					{
						path: '../../static/banner/banner08.jpg',
						id: ''
					}
					
				]
			};
		},
		methods:{
			swiperClick(index, item) { //幻灯片点击后
				console.log(index)
			},
			handleLoad(e) {  //数据加载后的方法
				// console.log(e)
				this.listLen = e.length
				this.outerLength = this.$refs.lastMusic.$el.clientWidth
			},
			goMusicDetail(item) { //展示音乐详情
				this.$emit('goMusicDetail', item)
			},
			playOne(item) { //播放单个音乐
				this.$emit('playOne', item)
			}
		}
	}
</script>

<style>

</style>
